React Router v6: Navigointimallien hallinta moderneissa verkkosovelluksissa

React Router v6 on tehokas ja joustava reitityskirjasto React-sovelluksille. Se mahdollistaa yhden sivun sovellusten (SPA) luomisen saumattomalla käyttökokemuksella hallinnoimalla navigointia ilman koko sivun uudelleenlatauksia. Tässä blogikirjoituksessa syvennytään React Router v6:n olennaisiin navigointimalleihin, tarjoten sinulle tiedot ja esimerkit vankkojen ja käyttäjäystävällisten verkkosovellusten rakentamiseen.

React Router v6:n ydinperiaatteiden ymmärtäminen

Ennen kuin syvennymme tiettyihin malleihin, kerrataan muutamia peruskäsitteitä:

• Deklaratiivinen reititys: React Router käyttää deklaratiivista lähestymistapaa, jossa määrität reitit React-komponentteina. Tämä tekee reitityslogiikastasi selkeän ja ylläpidettävän.
• Komponentit: Ydinkomponentteihin kuuluvat BrowserRouter, HashRouter, MemoryRouter, Routes ja Route.
• Hookit: React Router tarjoaa hookeja, kuten useNavigate, useLocation, useParams ja useRoutes, reititystietojen käyttämiseen ja navigoinnin hallintaan.

1. Deklaratiivinen reititys <Routes>- ja <Route>-komponenteilla

React Router v6:n perusta on deklaratiivinen reititys. Määrität reittisi käyttämällä <Routes>- ja <Route>-komponentteja. <Routes>-komponentti toimii säiliönä reiteillesi, ja <Route>-komponentti määrittelee tietyn reitin ja komponentin, joka renderöidään, kun reitti vastaa nykyistä URL-osoitetta.

Esimerkki: Perusreitityksen määritys

Tässä on perusesimerkki reittien määrittämisestä yksinkertaiseen sovellukseen:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";

function App() {
  return (
    
      
        } />
        } />
        } />
      
    
  );
}

export default App;

Tässä esimerkissä määrittelemme kolme reittiä:

• /: Renderöi Home-komponentin.
• /about: Renderöi About-komponentin.
• /contact: Renderöi Contact-komponentin.

BrowserRouter-komponentti mahdollistaa selaimen historiaan perustuvan reitityksen. React Router vertaa nykyistä URL-osoitetta määriteltyihin reitteihin ja renderöi vastaavan komponentin.

2. Dynaamiset reitit URL-parametreilla

Dynaamiset reitit mahdollistavat reittien luomisen, jotka voivat käsitellä eri arvoja URL-osoitteessa. Tämä on hyödyllistä, kun halutaan näyttää sisältöä yksilöllisen tunnisteen, kuten tuotetunnuksen tai käyttäjätunnuksen, perusteella. React Router v6 käyttää :-symbolia URL-parametrien määrittelyyn.

Esimerkki: Tuotetietojen näyttäminen

Oletetaan, että sinulla on verkkokauppasovellus ja haluat näyttää kunkin tuotteen tiedot sen ID:n perusteella. Voit määrittää dynaamisen reitin näin:

import { BrowserRouter, Routes, Route, useParams } from "react-router-dom";

function ProductDetails() {
  const { productId } = useParams();

  // Hae tuotetiedot productId:n perusteella
  // ...

  return (
    

      
Tuotetiedot
      
Tuotetunnus: {productId}
      {/* Näytä tuotetiedot tässä */}
    
  );
}

function App() {
  return (
    
      
        } />
      
    
  );
}

export default App;

Tässä esimerkissä:

• /products/:productId määrittelee dynaamisen reitin, jossa :productId on URL-parametri.
• useParams-hookia käytetään productId-parametrin arvon saamiseksi ProductDetails-komponentin sisällä.
• Voit sitten käyttää productId:tä vastaavien tuotetietojen hakemiseen tietolähteestäsi.

Kansainvälistämisesimerkki: Kielikoodien käsittely

Monikielisellä sivustolla voit käyttää dynaamista reittiä kielikoodien käsittelyyn:

} />

Tämä reitti vastaisi URL-osoitteita kuten /en/about, /fr/about ja /es/about. lang-parametria voidaan sitten käyttää sopivien kieliresurssien lataamiseen.

3. Ohjelmallinen navigointi useNavigate-hookilla

Vaikka deklaratiivinen reititys sopii erinomaisesti staattisille linkeille, usein on tarpeen navigoida ohjelmallisesti käyttäjän toimintojen tai sovelluslogiikan perusteella. React Router v6 tarjoaa tähän tarkoitukseen useNavigate-hookin. useNavigate palauttaa funktion, jonka avulla voit siirtyä eri reiteille.

Esimerkki: Uudelleenohjaus lomakkeen lähetyksen jälkeen

Oletetaan, että sinulla on lomakkeen lähetys ja haluat ohjata käyttäjän onnistumissivulle, kun lomake on lähetetty onnistuneesti:

import { useNavigate } from "react-router-dom";

function MyForm() {
  const navigate = useNavigate();

  const handleSubmit = async (event) => {
    event.preventDefault();

    // Lähetä lomakkeen tiedot
    // ...

    // Ohjaa onnistumissivulle onnistuneen lähetyksen jälkeen
    navigate("/success");
  };

  return (
    

      {/* Lomakkeen kentät */}
      Lähetä
    
  );
}

export default MyForm;

Tässä esimerkissä:

• Käytämme useNavigate-hookia saadaksemme navigate-funktion.
• Kun lomake on lähetetty onnistuneesti, kutsumme navigate("/success")-funktiota ohjataksemme käyttäjän /success-reitille.

Tilan (state) välittäminen navigoinnin aikana

Voit myös välittää tilaa (state) navigoinnin yhteydessä käyttämällä navigate-funktion toista argumenttia:

navigate("/confirmation", { state: { orderId: "12345" } });

Tämä mahdollistaa datan välittämisen kohdekomponentille, johon pääsee käsiksi useLocation-hookin avulla.

4. Sisäkkäiset reitit ja asettelut (Layouts)

Sisäkkäiset reitit mahdollistavat hierarkkisten reititysrakenteiden luomisen, joissa yksi reitti on toisen sisällä. Tämä on hyödyllistä monimutkaisten sovellusten järjestämisessä, joissa on useita navigointitasoja. Tämä auttaa luomaan asetteluja, joissa tietyt käyttöliittymäelementit ovat jatkuvasti läsnä sovelluksen tietyssä osiossa.

Esimerkki: Käyttäjäprofiiliosio

Oletetaan, että sinulla on käyttäjäprofiiliosio, jossa on sisäkkäisiä reittejä käyttäjän profiilitietojen, asetusten ja tilausten näyttämiseen:

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Profile() {
  return (
    

      
Käyttäjäprofiili
      

        

          Profiilitiedot
        
        

          Asetukset
        
        

          Tilaukset
        
      

      
        } />
        } />
        } />
      
    
  );
}

function ProfileInformation() {
  return 
Profiilitiedot-komponentti
;
}

function Settings() {
  return 
Asetukset-komponentti
;
}

function Orders() {
  return 
Tilaukset-komponentti
;
}

function App() {
  return (
    
      
        } />
      
    
  );
}

export default App;

Tässä esimerkissä:

• /profile/*-reitti vastaa mitä tahansa URL-osoitetta, joka alkaa /profile-merkkijonolla.
• Profile-komponentti renderöi navigointivalikon ja <Routes>-komponentin sisäkkäisten reittien käsittelyyn.
• Sisäkkäiset reitit määrittelevät komponentit, jotka renderöidään reiteille /profile/info, /profile/settings ja /profile/orders.

*-merkki yläreitissä on ratkaisevan tärkeä; se tarkoittaa, että yläreitin tulee vastata mitä tahansa alipolkua, mikä mahdollistaa sisäkkäisten reittien oikean vastaavuuden Profile-komponentin sisällä.

5. "Ei löydy" (404) -virheiden käsittely

On olennaista käsitellä tapaukset, joissa käyttäjä navigoi reitille, jota ei ole olemassa. React Router v6 tekee tämän helpoksi yleisreitillä (catch-all route).

Esimerkki: 404-sivun toteuttaminen

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function NotFound() {
  return (
    

      
404 - Ei löydy
      
Etsimääsi sivua ei löydy.
      Palaa etusivulle
    
  );
}

function App() {
  return (
    
      
        } />
        } />
        } />
      
    
  );
}

Tässä esimerkissä:

• <Route path="*" element={<NotFound />} />-reitti on yleisreitti, joka vastaa mitä tahansa URL-osoitetta, joka ei vastaa muita määriteltyjä reittejä.
• On tärkeää sijoittaa tämä reitti <Routes>-komponentin loppuun, jotta se vastaa vain, jos mikään muu reitti ei vastaa.

6. Datanlatausstrategiat React Router v6:lla

React Router v6 ei sisällä sisäänrakennettuja datanlatausmekanismeja kuten edeltäjänsä (React Router v5 ja `useRouteMatch`). Se kuitenkin tarjoaa työkalut erilaisten datanlatausstrategioiden tehokkaaseen toteuttamiseen.

Vaihtoehto 1: Datan hakeminen komponenteissa

Yksinkertaisin lähestymistapa on hakea data suoraan reitin renderöivässä komponentissa. Voit käyttää useEffect-hookia datan hakemiseen, kun komponentti liitetään (mount) tai kun URL-parametrit muuttuvat.

import { useParams } from "react-router-dom";
import { useEffect, useState } from "react";

function ProductDetails() {
  const { productId } = useParams();
  const [product, setProduct] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchProduct() {
      try {
        const response = await fetch(`/api/products/${productId}`);
        if (!response.ok) {
          throw new Error(`HTTP-virhe! status: ${response.status}`);
        }
        const data = await response.json();
        setProduct(data);
        setLoading(false);
      } catch (e) {
        setError(e);
        setLoading(false);
      }
    }

    fetchProduct();
  }, [productId]);

  if (loading) return 
Ladataan...
;
  if (error) return 
Virhe: {error.message}
;
  if (!product) return 
Tuotetta ei löytynyt
;

  return (
    

      
{product.name}
      
{product.description}
    
  );
}

export default ProductDetails;

Tämä lähestymistapa on suoraviivainen, mutta se voi johtaa koodin monistumiseen, jos dataa täytyy hakea useissa komponenteissa. Se on myös tehottomampi, koska datan haku alkaa vasta komponentin liittämisen jälkeen.

Vaihtoehto 2: Mukautetun hookin käyttö datan hakuun

Koodin monistumisen vähentämiseksi voit luoda mukautetun hookin, joka kapseloi datanhakulogiikan. Tätä hookia voidaan sitten käyttää uudelleen useissa komponenteissa.

import { useState, useEffect } from "react";

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`HTTP-virhe! status: ${response.status}`);
        }
        const json = await response.json();
        setData(json);
        setLoading(false);
      } catch (e) {
        setError(e);
        setLoading(false);
      }
    }

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

Sitten voit käyttää tätä hookia komponenteissasi:

import { useParams } from "react-router-dom";
import useFetch from "./useFetch";

function ProductDetails() {
  const { productId } = useParams();
  const { data: product, loading, error } = useFetch(`/api/products/${productId}`);

  if (loading) return 
Ladataan...
;
  if (error) return 
Virhe: {error.message}
;
  if (!product) return 
Tuotetta ei löytynyt
;

  return (
    

      
{product.name}
      
{product.description}
    
  );
}

export default ProductDetails;

Vaihtoehto 3: Reitityskirjaston käyttö datanhakuominaisuuksilla (TanStack Router, Remix)

Kirjastot, kuten TanStack Router ja Remix, tarjoavat sisäänrakennettuja datanhakumekanismeja, jotka integroituvat saumattomasti reititykseen. Nämä kirjastot tarjoavat usein ominaisuuksia, kuten:

• Loaderit (Lataajat): Funktiot, jotka suoritetaan *ennen* reitin renderöintiä, mahdollistaen datan hakemisen ja sen välittämisen komponentille.
• Actionit (Toiminnot): Funktiot, jotka käsittelevät lomakkeiden lähetyksiä ja datan muutoksia.

Tällaisen kirjaston käyttö voi merkittävästi yksinkertaistaa datan lataamista ja parantaa suorituskykyä, erityisesti monimutkaisissa sovelluksissa.

Palvelinpuolen renderöinti (SSR) ja staattisen sivuston generointi (SSG)

Parannetun hakukoneoptimoinnin (SEO) ja alkulatauksen suorituskyvyn saavuttamiseksi harkitse SSR:n tai SSG:n käyttöä Next.js:n tai Gatsbyn kaltaisten frameworkien kanssa. Nämä frameworkit mahdollistavat datan hakemisen palvelimella tai käännösvaiheessa ja esirenderöidyn HTML:n tarjoamisen asiakkaalle. Tämä poistaa asiakkaan tarpeen hakea dataa alkulatauksen yhteydessä, mikä johtaa nopeampaan ja SEO-ystävällisempään kokemukseen.

7. Eri reititintyyppien kanssa työskentely

React Router v6 tarjoaa erilaisia reititintoteutuksia eri ympäristöihin ja käyttötapauksiin:

• BrowserRouter: Käyttää HTML5 history API:a (pushState, replaceState) navigointiin. Se on yleisin valinta selainympäristössä toimiville verkkosovelluksille.
• HashRouter: Käyttää URL-osoitteen #-osaa (hash) navigointiin. Tämä on hyödyllistä sovelluksissa, joiden on tuettava vanhempia selaimia tai jotka on otettu käyttöön palvelimilla, jotka eivät tue HTML5 history API:a.
• MemoryRouter: Pitää "URL"-historiasi muistissa (taulukko URL-osoitteita). Hyödyllinen ympäristöissä kuten React Native ja testauksessa.

Valitse reititintyyppi, joka sopii parhaiten sovelluksesi vaatimuksiin ja ympäristöön.

Yhteenveto

React Router v6 tarjoaa kattavan ja joustavan reititysratkaisun React-sovelluksille. Ymmärtämällä ja soveltamalla tässä blogikirjoituksessa käsiteltyjä navigointimalleja voit rakentaa vakaita, käyttäjäystävällisiä ja ylläpidettäviä verkkosovelluksia. Deklaratiivisesta reitityksestä <Routes>- ja <Route>-komponenteilla dynaamisiin reitteihin URL-parametreilla, ohjelmalliseen navigointiin useNavigate-hookilla ja tehokkaisiin datanlatausstrategioihin, React Router v6 antaa sinulle voimaa luoda saumattomia navigointikokemuksia käyttäjillesi. Harkitse edistyneempien reitityskirjastojen ja SSR/SSG-frameworkien tutkimista saadaksesi vielä paremman hallinnan ja suorituskyvyn optimoinnin. Muista mukauttaa nämä mallit omaan sovelluskohtaiseen tarpeeseesi ja aseta aina etusijalle selkeä ja intuitiivinen käyttökokemus.